<template>
  <div class="order-detalis-a">
  <div class="order-detalis-wrapper">
    <div class="nav-wrapper">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <!-- <el-breadcrumb-item :to="{ path: '/personal', query:{flag: '0'}}">个人中心</el-breadcrumb-item> -->
        <el-breadcrumb-item :to="{ path: '/personal', query:{flag: '1'}}">我的订单</el-breadcrumb-item>
        <el-breadcrumb-item>分期详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="order-list-content">
       <div class="orderHead">
          <p>套餐名称</p>
          <p>包含课程</p>
          <p>套餐价格（元）</p>
          <p>当前应还（元）</p>
          <p>分期状态</p>
          <p>操作</p>
        </div>
      <div class="list">
        <!-- <orderList :orderItem="item" @orderClose="orderCloseFn" @orderDelete="orderDeleteFn" v-for="(item, index) in orderData" :key="index+'order'"></orderList> -->
        <orderList :orderItem="item" v-for="(item, index) in orderData" :key="index+'order'"></orderList>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import { instalOrderById } from 'api/getData';
import orderList from 'basic/orderlist/index'
import dom from "plus/dom"
export default {
  data() {
    return {
      orderData: []
    }
  },
  mounted() {
    document.querySelector('.order-detalis-a').style.minHeight = dom.getHeight()
    this.getList()
  },
  components: {
    orderList
  },
  methods: {
    getList() {
      instalOrderById(this.$route.query.orderId).then(res => {
        let showBool = true;
        res.data.msg.forEach((item, index) => {
          this.orderData.push({})
          this.orderData[index].hireSn = item.hireSn
          this.orderData[index].orderSn = item.hireSn
          this.orderData[index].num = item.num
          this.orderData[index].orderText = '分期编号：'
          this.orderData[index].timeText = '最迟还款时间：'
          this.orderData[index].hirePuchaesNum = item.order.hirePuchaesNum
          this.orderData[index].createdAt = item.closeDate
          this.orderData[index].totalPrice = item.order.totalPrice
          this.orderData[index].totalPayPrice = item.hirePrice
          this.orderData[index].orderStatus = 'f' + item.hireStatus

          if (showBool) {
            if (item.hireStatus == '0' || item.hireStatus == '2') { // 找出哪个是第一个未支付 或 逾期 标实为 1
              showBool = false
              this.orderData[index].showNum = 1
            } else {
              this.orderData[index].showNum = 2
            }

          } else {
            this.orderData[index].showNum = 2
          }
          this.orderData[index].parentPack = item.order.pack
          this.orderData[index].pack = {}
          this.orderData[index].pack.name = item.order.pack.name
          this.orderData[index].pack.courses = item.order.pack.courses
        });
      })
    }
  }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
.order-detalis-a{
  width: 100%;
  background:rgba(245,245,245,1);  
}
.orderHead {
  @extend .clear-fix;
  padding-bottom: 42px;

  p {
    float: left;
    width: 16%;
    text-align: center;
    font-size: $font-size-medium-x;
    color: $color-text-l;
  }

  p+p {
    margin-left: 9px;
  }
}

.order-detalis-wrapper {
  @extend .sWidth;
 
  
  .order-list-content {
    width: 1200;
    padding-top: 45px;
   

    .list {
      width: 100%;
    }

    .list ul {
      @extend .clear-default;
    }

    .list ul li {
      @extend .clear-default;
      height: 53px;
      border-bottom: 1px solid #CDCDCD;
      line-height: 53px;
      font-size: $font-size-medium-x;
      color: $color-text-l;

      .text {
        float: left;
        width: 10%;
        text-align: center;
      }

      .text+.text {
        margin-left: 5px;
      }

      .text i {
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 8px;
        border-radius: 50%;
        vertical-align: middle;
      }

      .text:first-child {
        width: 66px;
      }

      .text i.red {
        background-color: red;
      }

      .text i.blue {
        background-color: #537AAA;
      }

      .text i.green {
        background-color: #52C41A;
      }
    }

    .list ul li.bgColor {
      background-color: #E6F7FF;
    }

    .list ul li+li {
      font-size: $font-size-medium;

      .text:last-child {
        color: $color-theme;
      }
    }
  }
}
</style>
